<template>
  <div class="list_box">
    <lang class="lang" />

    <div class="main">
      <!-- 搜索框 -->
      <div class="header_view">
        <div class="list_main">
          <div class="search_view"><Search /></div>
        </div>
      </div>

      <div class="detail_box">
        <div class="left_box">
          <div class="back_btn" @click="goBack()">
            上一页
          </div>
          <div class="title_box row">
            <div class="title fs_18 pb_3 col-12"><span class="mainColor fw_600 pr_10 min_w_300">书名:</span> <b>《{{ bookDetailData.title }}》</b></div>
            <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">索书号:</span>{{ bookDetailData.shelf_number }}</div>
            <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10">作者:</span>{{ bookDetailData.authors }}</div>
            <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">出版日期:</span>{{ bookDetailData.published }}</div>
            <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">出版社:</span>《{{ bookDetailData.publisher }}》</div>
            <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">ISBN:</span>[ {{ bookDetailData.isbn }} ]</div>
            <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">价格:</span>{{ bookDetailData.price }}</div>
            <div class="title fs_16 pb_3 col-12"><span class="mainColor fw_600 pr_10 min_w_300">摘要:</span>{{ bookDetailData.abstract || bookDetailData.description || '无' }}</div>
          </div>

          <!-- 翻页效果 -->
          <div class="img_box">
            <Turn :bookImgs="bookImgs" />

            <!-- loading 动画 -->
            <div v-show="isShow" class="loading_box">
              <div class="loading">
                <spinner />
              </div>
            </div>
          </div>

          <div class="img_box_1">
            <div class="img_item" v-for="(item, index) in bookImgs" :key="index">
              <img :src="item.img" alt="">
            </div>

            <!-- loading 动画 -->
            <div v-show="isShow" class="loading_box">
              <div class="loading">
                <spinner />
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐 -->
        <div class="right_box" v-if="recommendBooks && recommendBooks.length">
          <div class="r_title mainColor fs_18 text_center">推荐书籍</div>

          <div class="recommend_list_box row">
            <div class="tui_jian_box col-lg-12 col-md-4" v-for="(item, index) in recommendBooks" :key="index">
              <div class="title fs_16 fw_600 ellipsis h_30 l_h_30" v-if="item.title && item.title !== '-'" @click="handlerClickRecommendBook(index)">《{{ item.title }}》</div>
              <div class="title title_mn fs_16 fw_600 ellipsis h_30 l_h_30" v-else @click="handlerClickRecommendBook(index)">《{{ item.title_m }}》</div>
              
              <div class="rec_img_box">
                <img class="img_full" :src="item.img || def_book" alt="" @click="handlerClickRecommendBook(index)">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import lang from '../components/lang.vue';
  import TitleCom from '../components/title.vue';
  import Search from './search.vue';
  import Turn from './turn.vue';
  import Spinner from 'vue-simple-spinner'

  export default {
    name: 'BookDetail',
    components: { lang, TitleCom, Search, Turn, Spinner },
    data() {
      return {
        id: 0,
        bookDetailData: {},
        bookImgs: [],
        recommendBooks: [],
        def_book: require('../assets/def-book.png'),
        timer: null,
        isShow: false,
      }
    },
    created() {
      let id = this.$route.query.id
      if (id) {
        this.getBookDetail(id)
      }
    },
    methods: {
      // 获取 图书 详情信息
      async getBookDetail(id) {
        let that = this
        this.isShow = true

        // 判断 响应数据
        this.timer = setTimeout(() => {
          that.$message('求情失败，服务器发生错误！');
          that.isShow = false
        }, 3000)

        // let res = await this.axios.get(`/bookrec/api/v1/books/${ id }`)
        let res = await this.axios.get(`api/bookrec/api/v1/books/${ id }`)
        if (res.data.code == 200) {
          clearTimeout(that.timer)
          this.isShow = false
          // console.log(res);
          that.bookDetailData = res.data.data
          that.bookImgs = res.data.data.images
          that.recommendBooks =  res.data.data.recommends
        } else {
          clearTimeout(that.timer)
          this.isShow = false
          this.$message('图书详情获取失败！');
          return false
        }
      },

      // 前往蒙文
      goToMnDetail(id) {
        this.$router.push({
          path: '/book-detail-mn',
          query: { id }
        })
      },

      // 返回上一页
      goBack() {
        this.$router.back()
      },

      // 点击 【推荐书籍】
      async handlerClickRecommendBook(index) {
        let id = this.bookDetailData.recommends[index].id

        if (this.bookDetailData.recommends[index].title && this.bookDetailData.recommends[index].title !== '-') {
          this.getBookDetail(id)
        } else {
          // 前往蒙文详情页
          this.goToMnDetail(id)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .list_box {
    height: 100vh;
    overflow: scroll;
    padding-left: 50px;
    
    .main {
      .header_view {
        width: 180px;
        height: 100%;
        padding-bottom: 20px;
        float: left;
        margin-left: 3%;
        // border: 1px solid #ccc;
        .list_main {
          width: 100%;
        }
      }
  
      .detail_box {
        // width: calc(100% - 180px);
        width: 77%;
        padding: 20px 20px;
        margin-top: 80px;
        margin-left: 15%;
        overflow: hidden;
        // border: 1px solid #000;

        .left_box {
          width: 80%;
          float: left;
          overflow: hidden;

          .back_btn {
            width: 80px; 
            height: 35px; 
            line-height: 35px; 
            text-align: center; 
            border-radius: 5px; 
            margin-bottom: 5px; 
            background-color: #74a5ff; 
            color: #fff; 
            cursor: pointer;
          }
          
          .img_box {
            margin-top: 10px;
            border: 1px solid #74a5ff;
            position: relative;

            .loading_box {
              width: 20px;
              height: 20px;
              line-height: 20px;
              position: absolute;
              top: 50%;
              left: 50%;
              z-index: 999;
              transform: translate(-50%, -50%);
              text-align: center;
              
              .loading {
                font-size: 100px;
                color: #ccc;
                .loading_icon { color: #74a5ff !important; }
              }
            }
          }

          .img_box_1 {
            width: 80%;
            min-height: 800px;
            border: 1px solid #74a5ff;
            float: left;
            text-align: center;
            overflow: auto;
            padding-top: 20px;
            position: relative;

            img { margin-bottom: 10px; width: 100%;  }

            .loading_box {
              width: 20px;
              height: 20px;
              line-height: 20px;
              position: absolute;
              top: 50%;
              left: 50%;
              z-index: 999;
              transform: translate(-50%, -50%);
              text-align: center;
              
              .loading {
                font-size: 100px;
                color: #ccc;
                .loading_icon { color: #74a5ff !important; }
              }
            }
          }
          .img_box_1::-webkit-scrollbar {
            width: 1px;
            height: 100%;
            background-color: #f5f5f5;
          }
          .img_box_1::-webkit-scrollbar-thumb {       
            border-radius: 10px;
            background: #74a5ff;
          }
        }

        .right_box {
          width: 20%;
          float: left;
          // border: 1px solid #000;
          .r_title { width: 80%; }
          .row {
            .tui_jian_box {
              width: 100%;
              overflow: hidden;
              .title {
                width: 100%;
                text-align: center;
              }
              .title:hover { cursor: pointer; }

              .title_mn {
                width: 25px;
                height: 200px;
                float: left;
                writing-mode: vertical-lr;
                white-space: nowrap;
              }
              
              .rec_img_box {
                width: calc(100% - 25px);
                height: calc(100% - 20px);
                float: right;
              }
              .rec_img_box:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
    }  
  }  

  .list_box::-webkit-scrollbar {
    width: 3px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .list_box::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }

  .recommend_list_box {
    width: 100%;
    height: 820px;
    overflow: auto;
  }
  .recommend_list_box::-webkit-scrollbar {
    width: 2px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .recommend_list_box::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }

  @media screen and (min-width: 1600px) {
    .header_view { height: 182px; }
    .detail_box { position: relative; left: 20px; }

    .tui_jian_box { height: 270px; padding-bottom: 30px; }
    .tui_jian_box > .title { font-size: 18px; }
  }

  @media screen and (max-width: 1500px) {
    .img_box, .recommond_box { display: none; }
    .img_box_1, .recommond_box_1 { display: block; }
  }

  @media screen and (min-width: 1501px) {
    .img_box, .recommond_box { display: block; }
    .img_box_1, .recommond_box_1 { display: none; }
  }

  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    .header_view { height: 182px; }
    .tui_jian_box { height: 240px; padding-bottom: 30px; }
    .tui_jian_box > .title { font-size: 17px; }
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .header_view { height: 182px; }
    .tui_jian_box > .title { font-size: 16px; }
    .tui_jian_box { height: 220px; padding-bottom: 30px; }
    .tui_jian_box > .title { font-size: 17px; }
  }

  @media screen and (min-width: 1000px) and (max-width: 1199px) {
    .header_view { height: 180px; }
    .tui_jian_box { height: 200px; padding-bottom: 30px; }
    .tui_jian_box > .title { font-size: 16px; }
  }

  @media screen and (min-width: 768px) and (max-width: 999px) {
    .header_view { height: 179px; }
    .tui_jian_box > .title { font-size: 15px; }
    // .right_box {  margin-top: 50px; }
  }
</style>
